<nz-card>
    <div nz-row [nzGutter]="18">
        <div nz-col [nzSpan]="4.5">
            <nz-space>
                <div *nzSpaceItem>
                    <nz-form-label>关键字</nz-form-label>
                    <input nz-input style="width: 210px" placeholder="用户名/真实姓名" [(ngModel)]="keywords"/>
                </div>
                <div *nzSpaceItem>
                    <nz-form-label>开始时间</nz-form-label>
                    <nz-date-picker style="width: 210px" nzShowTime nzFormat="yyyy-MM-dd HH:mm:ss" nzPlaceHolder="选择时间"
                                    [(ngModel)]="startTime"></nz-date-picker>
                </div>
                <div *nzSpaceItem>
                    <nz-form-label>结束时间</nz-form-label>
                    <nz-date-picker style="width: 210px" nzShowTime nzFormat="yyyy-MM-dd HH:mm:ss" nzPlaceHolder="选择时间"
                                    [(ngModel)]="endTime"></nz-date-picker>
                </div>
            </nz-space>
        </div>
        <div nz-col [nzSpan]="4.5">
            <nz-space>
                <button nz-button *nzSpaceItem [nzType]="'primary'" (click)="search()">
                    <i nz-icon nzType="search"></i>搜索
                </button>
                <button nz-button *nzSpaceItem (click)="resetSearch()">
                    <i nz-icon nzType="undo"></i>重置
                </button>
            </nz-space>
        </div>
    </div>
</nz-card>
<nz-table style="margin-top: 5px;"
          nzShowSizeChanger
          [nzData]="loginRecords"
          [nzFrontPagination]="false"
          [nzLoading]="isBusy"
          [nzScroll]="{y: 'calc(100vh - 350px)'}"
          [nzTotal]="rowCount"
          [nzPageSize]="pageSize"
          [nzPageIndex]="pageIndex"
          (nzPageIndexChange)="onPageIndexChange($event)"
          (nzPageSizeChange)="onPageSizeChange($event)">
    <thead>
    <tr>
        <th nzWidth="200px" nzAlign="center">用户名</th>
        <th nzWidth="200px" nzAlign="center">真实姓名</th>
        <th nzWidth="240px" nzAlign="center">IP地址</th>
        <th nzWidth="300px" nzAlign="center">客户端Id</th>
        <th nzWidth="200px" nzAlign="center">登录时间</th>
        <th nzWidth="*"></th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let loginRecord of loginRecords">
        <td style="padding-left: 20px">{{loginRecord.loginId}}</td>
        <td>{{loginRecord.realName}}</td>
        <td>{{loginRecord.ip}}</td>
        <td>{{loginRecord.clientId}}</td>
        <td nzAlign="center">{{loginRecord.addedTime | date:"yyyy-MM-dd HH:mm:ss"}}</td>
        <td></td>
    </tr>
    </tbody>
</nz-table>
